<html>
  <head>
    <link
      href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
      rel="stylesheet"
    />
    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
    <style>
      body {
        background: rgb(221, 208, 208);
        font-family: 'Arial';
        }
      h1 { color: white;}
      .mermaid2 {
        display: none;
      }
    </style>
  </head>
  <body>
    <h1>info below</h1>
      <div class="mermaid" style="width: 100%; height: 20%;">
    flowchart TD
        db[(PostgreSQL<br/>database)]
        broker{RabbitMQ<br/>broker}
        db --> broker
        box --> broker
      </div>
        broker --> db
        broker --> box
        db --> broker
        box --> broker

      <div class="mermaid2" style="width: 50%; height: 20%;">
flowchart LR
    A{{A}}-- apa -->B{{B}};
    click A callback "Tooltip"
    click B "http://www.github.com" "This is a link"

      </div>
      <div class="mermaid2" style="width: 50%; height: 20%;">
graph LR
    A{{A}}--apa-->B{{B}};

      </div>
      <div class="mermaid2" style="width: 50%; height: 20%;">
     stateDiagram-v2
      [*]-->TV

      state TV {
        state fork_state &lt;&lt;fork&gt;&gt;
        [*] --> fork_state
        fork_state --> State2
        fork_state --> State3

        state join_state &lt;&lt;join&gt;&gt;
        State2 --> join_state
        State3 --> join_state
        join_state --> State4
        State4 --> [*]
      }
      </div>
      <div class="mermaid2" style="width: 100%; height: 100%;">
        stateDiagram-v2
        [*] --> Still
        Still --> [*]
        Still --> Moving
        Moving --> Still
        Moving --> Crash
        Crash --> [*]
      </div>
      <div class="mermaid2" style="width: 100%; height: 100%;">
stateDiagram-v2
    [*] --> First
    First --> Third
    First --> sec

    state First {
        [*] --> fir
        fir --> [*]
    }
    state Second {
        [*] --> sec
        sec --> [*]
   }
    state Third {
        [*] --> thi
        thi --> [*]
      }
      thi --> sec
    </div>
      <div class="mermaid2" style="width: 100%; height: 100%;">
flowchart TD
    subgraph A
      a
    end
    subgraph B
      b
    end
    subgraph C
      subgraph D
        d
      end
    end
    A -- oAo --o B
    A --> C
    </div>
      <div class="mermaid2" style="width: 100%; height: 100%;">
flowchart TD
    subgraph A
      a
    end
    subgraph B
      b
    end
    c-->A
    c-->B
  </div>
      <div class="mermaid2" style="width: 100%; height: 100%;">
stateDiagram-v2
    [*] --> First
    First --> Second
    First --> Third

    state First {
        [*] --> fir
        fir --> [*]
    }
    state Second {
        [*] --> sec
        sec --> [*]
    }
    state Third {
        [*] --> thi
        thi --> [*]
    }
    </div>
      <div class="mermaid2" style="width: 100%; height: 100%;">
        stateDiagram-v2
          [*]-->TV

          state TV {
            [*] --> Off: Off to start with
            On --> Off : Turn off
            Off --> On : Turn on
          }

          TV--> Console

          state Console {
            [*] --> Off2: Off to start with
            On2--> Off2 : Turn off
            Off2 --> On2 : Turn on
            On2-->Playing

            state Playing {
              Alive --> Dead
              Dead-->Alive
            }
          }
      </div>

    <div style="display: flex;flex-direction:column;width: 100%; height: 100%">
      <div class="mermaid2" style="width: 100%; height: 100%;">
        stateDiagram-v2
          state apa {
            [*] --> Still
            Still --> [*]

            Still --> Moving
            Moving --> Still
            Moving --> Crash
            Crash --> [*]
          }

      </div>
      <div class="mermaid2" style="width: 100%; height: 100%">
        flowchart TB
        a --> b

        subgraph id1 [Test]
            a --apa--> c
            b
            c-->b
            b-->H
          end
        G-->H
        G-->id1
        id1 --> I
        I --> G
      </div>
      <div class="mermaid2" style="width: 100%; height: 100%">
        flowchart RL
        a --> b

        subgraph id1 [Test]
            a --apa--> c
            b
            c-->b
            b-->H
          end
        G-->H
        G-->id1
        id1 --> I
        I --> G
      </div>
      <div class="mermaid2" style="width: 100%; height: 100%">
        flowchart RL

        subgraph id1 [Test]
          a
        end
        b-->id1
      </div>
      <div class="mermaid2" style="width: 100%; height: 100%">
        flowchart RL

        subgraph id1 [Test1]
          a
        end
        subgraph id2 [Test2]
          b
        end
        a --> id2
        a --> b
        b-->id1
        id1 --> id2
      </div>
      new:
      <div class="mermaid2" style="width: 100%; height: 100%">
        flowchart LR
          a <--> b
          b o--o c
          c x--x d
          a21([In the box]) --> b2
          b2((b2)) --o c2
          c2(c2) --x d2 --> id1{{This is the text in the box}} --> A[(cylindrical<br />shape<br />test)]
      </div>
      old:
      <div class="mermaid2" style="width: 100%; height: 100%">
        graph LR
          a((a)) --> b --> id1{{This is the text in the box}}
          A[(cylindrical<br />shape<br />test)]
      </div>

</div>
  <script src="./mermaid.js"></script>
    <script>
      mermaid.initialize({
        // theme: 'dark',
        // arrowMarkerAbsolute: true,
        // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
        logLevel: 0,
        flowchart: { curve: 'linear', "htmlLabels": true },
        // gantt: { axisFormat: '%m/%d/%Y' },
        sequence: { actorMargin: 50, showSequenceNumbers: true },
        // sequenceDiagram: { actorMargin: 300 } // deprecated
        fontFamily: '"arial", sans-serif',
        curve: 'linear',
        securityLevel: 'loose'
      });
      function callback(){alert('It worked');}
    </script>
  </body>
</html>
